
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric资产管理</title>
    <script src="https://cdn.jsdelivr.net/npm/fabric-gateway@2.4.0/dist/bundle.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 30px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        h2 {
            color: #3498db;
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #555;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        button:hover {
            background: #2980b9;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #3498db;
        }
        .error {
            border-left-color: #e74c3c;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>区块链资产管理系统</h1>
        
        <!-- 连接网关配置 -->
        <div class="card">
            <h2>网络连接配置</h2>
            <div class="form-group">
                <label for="gatewayEndpoint">网关地址:</label>
                <input type="text" id="gatewayEndpoint" value="grpc://localhost:7051">
            </div>
            <div class="form-group">
                <label for="channelName">通道名称:</label>
                <input type="text" id="channelName" value="mychannel">
            </div>
            <div class="form-group">
                <label for="chaincodeName">链码名称:</label>
                <input type="text" id="chaincodeName" value="asset_chaincode">
            </div>
            <button onclick="connectGateway()">连接网络</button>
            <div id="connectionResult" class="result"></div>
        </div>

        <!-- 资产上链 -->
        <div class="card">
            <h2>资产上链登记</h2>
            <div class="form-group">
                <label for="assetId">资产ID:</label>
                <input type="text" id="assetId" placeholder="唯一标识符">
            </div>
            <div class="form-group">
                <label for="assetOwner">所有者:</label>
                <input type="text" id="assetOwner" placeholder="钱包地址">
            </div>
            <div class="form-group">
                <label for="assetName">资产名称:</label>
                <input type="text" id="assetName" placeholder="描述性名称">
            </div>
            <div class="form-group">
                <label for="assetInfo">资产信息:</label>
                <input type="text" id="assetInfo" placeholder="附加信息">
            </div>
            <button onclick="createAsset()">提交上链</button>
            <div id="createResult" class="result"></div>
        </div>

        <!-- 资产查询 -->
        <div class="card">
            <h2>资产信息查询</h2>
            <div class="form-group">
                <label for="queryAssetId">资产ID:</label>
                <input type="text" id="queryAssetId" placeholder="输入要查询的资产ID">
            </div>
            <button onclick="queryAsset()">查询资产</button>
            <div id="queryResult" class="result"></div>
        </div>

        <!-- 资产转移 -->
        <div class="card">
            <h2>资产所有权转移</h2>
            <div class="form-group">
                <label for="transferAssetId">资产ID:</label>
                <input type="text" id="transferAssetId" placeholder="要转移的资产ID">
            </div>
            <div class="form-group">
                <label for="newOwner">新所有者:</label>
                <input type="text" id="newOwner" placeholder="新所有者钱包地址">
            </div>
            <button onclick="transferAsset()">确认转移</button>
            <div id="transferResult" class="result"></div>
        </div>
    </div>

    <script>
        let gateway;
        let network;
        let contract;

        // 连接网关
        async function connectGateway() {
            try {
                const endpoint = document.getElementById('gatewayEndpoint').value;
                const channel = document.getElementById('channelName').value;
                const chaincode = document.getElementById('chaincodeName').value;
                
                gateway = new fabric.Gateway();
                await gateway.connect(endpoint, { 
                    // 实际应用需要添加身份凭证
                    identity: { mspId: 'Org1MSP' },
                    discovery: { enabled: false }
                });
                
                network = await gateway.getNetwork(channel);
                contract = network.getContract(chaincode);
                
                document.getElementById('connectionResult').innerHTML = 
                    `成功连接到通道 ${channel}，链码 ${chaincode}`;
            } catch (error) {
                document.getElementById('connectionResult').className = 'result error';
                document.getElementById('connectionResult').innerHTML = 
                    `连接失败: ${error.message}`;
            }
        }

        // 资产上链
        async function createAsset() {
            if (!contract) {
                alert('请先连接网络');
                return;
            }
            
            const id = document.getElementById('assetId').value;
            const owner = document.getElementById('assetOwner').value;
            const name = document.getElementById('assetName').value;
            const info = document.getElementById('assetInfo').value;
            
            try {
                const result = await contract.submitTransaction('Create', id, owner, name, info);
                document.getElementById('createResult').className = 'result';
                document.getElementById('createResult').innerHTML = 
                    `资产 ${name} (ID: ${id}) 上链成功<br>交易ID: ${result.toString()}`;
            } catch (error) {
                document.getElementById('createResult').className = 'result error';
                document.getElementById('createResult').innerHTML = 
                    `上链失败: ${error.message}`;
            }
        }

        // 查询资产
        async function queryAsset() {
            if (!contract) {
                alert('请先连接网络');
                return;
            }
            
            const id = document.getElementById('queryAssetId').value;
            
            try {
                const result = await contract.evaluateTransaction('Query', id);
                const asset = JSON.parse(result.toString());
                
                let output = `<strong>资产ID:</strong> ${asset.id}<br>`;
                output += `<strong>名称:</strong> ${asset.name}<br>`;
                output += `<strong>所有者:</strong> ${asset.owner}<br>`;
                output += `<strong>信息:</strong> ${asset.info}`;
                
                document.getElementById('queryResult').className = 'result';
                document.getElementById('queryResult').innerHTML = output;
            } catch (error) {
                document.getElementById('queryResult').className = 'result error';
                document.getElementById('queryResult').innerHTML = 
                    `查询失败: ${error.message}`;
            }
        }

        // 转移资产
        async function transferAsset() {
            if (!contract) {
                alert('请先连接网络');
                return;
            }
            
            const id = document.getElementById('transferAssetId').value;
            const newOwner = document.getElementById('newOwner').value;
            
            try {
                await contract.submitTransaction('Transfer', id, newOwner);
                document.getElementById('transferResult').className = 'result';
                document.getElementById('transferResult').innerHTML = 
                    `资产 ${id} 所有权已成功转移至 ${newOwner}`;
            } catch (error) {
                document.getElementById('transferResult').className = 'result error';
                document.getElementById('transferResult').innerHTML = 
                    `转移失败: ${error.message}`;
            }
        }
    </script>
</body>
</html>
